<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="style.css" rel="stylesheet">
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>

    <script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>

标题：<input type="text" name="title" id="title">
<p/>
作者：<input type="text" name="author" id="author">
<p/>
<div id="editor—wrapper">
    <div id="toolbar-container"><!-- 工具栏 --></div>
    <div id="editor-container"><!-- 编辑器 --></div>
</div>
<p/>
<button type="button" id="btn">提交</button>

<script src="index.js"></script>
<script>
    const {createEditor, createToolbar} = window.wangEditor

    const editorConfig = {
        MENU_CONF: {},
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            console.log('editor content', html)
            // 也可以同步到 <textarea>
        }
    }

    // 配置必须放在 createEditor 之前
    editorConfig.MENU_CONF['uploadImage'] = {
        // server: 'http://localhost:8080/upload',
        server: '/upload',
        fieldName: 'attach'
    }

    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })


    const toolbarConfig = {}

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })

    $("#btn").click(function(){
        $.ajax({
            url:'blog/add',
            data:{
                title:$("#title").val(),
                author:$("#author").val(),
                content:editor.getHtml(),
            },
            method:'post',
            success:function(res) {
                alert("发表成功")
                location.href = res.data ;
            }
        }) ;

    });

</script>
</body>
</html>